<template>
	<view :style="{'--color':color}">
		<navBar :bgColor="bgColor" :transparent="transparent" :title="title"></navBar>
		<view class="topBg" :style="{background: `linear-gradient(to bottom, ${color},${colorVal})`}">
			<view class="content d-flex f-column">
				 <view class="row a-center">
					<image :src="imgUrl+classify_info.classimg" mode="aspectFill" class="imgli bor_radius_10" v-if="classify_info.classimg"></image>
					<view class="flex-1 m-left20 white size32 ellipsis_2">{{classify_info.name}}</view>
				 </view>
				 <view class="rows m-top10 white h6 ellipsis_2" v-if="classify_info.classinfo">
					{{classify_info.classinfo}}
				 </view>
			</view>
		</view>
		
		<view class="row bgwhite nav padding30" id="navBox" :class="fixed?'fixedBox':''" >
			<block v-for="(item,index) in nav" :key="index">
				<view class="m-right50 p-bot16 p-re" :class="current == index?'active bold color size34':'color_33 size32'"
					@click="changeNav(index)">{{item}}</view>
			</block>
		</view>
		
		<list :pageData="pageData" :classifyid="classifyid"></list>
		
		<postBtn :classifyid="classifyid" :homePun="homePun"></postBtn>	
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import navBar from '@/components/navBar/navBar.vue'
	import list from '../components/forum/list.vue';
	import postBtn from '../components/forum/postBtn.vue';
	export default {
		components: {
			navBar,
			list,
			postBtn
		},
		data() {
			return {
				imgUrl:this.imgUrl,
				getMore:true,
				title:'',
				bgColor:0, //  0、没有背景色， 1、为白色  2、为主题色
				nav: ['全部', '热门'],
				current: 0,
				viewTop:0,
				fixed:false,
				transparent:false,
				classifyid:'',
				homePun:0,  // 1为打卡话题
				pageData:[],
				classify_info:'',
				pageindex:1,
				pagecount:10,	
			}
		},
		onLoad(e) {
			if(e.classifyid) this.classifyid = e.classifyid;
			if(e.homePun) this.homePun = e.homePun;  
		},
		onShow() {
			this.ViewInfo();
			this.user_space_manage();
		},
		methods: {
			user_space_manage(){
				this.$http.get({
					url:'/communityApi/user_space_manage',
					data:{
						pageindex:this.pageindex,
						pagecount:this.pagecount,
						classifyid:this.classifyid,
						hot:this.current
					}
				}).then(res=>{
					if(res.code != '100') return this.$Toast(res.msg);
					this.classify_info = res.data.classify_info;
					let dataInfo;
					if (!res.data || !res.data.data) {
						res.data.data = [];
						this.getMore = false;
					}
					if (res.data && res.data.data) dataInfo = res.data.data;
					this.pageindex == 1 ? this.pageData = dataInfo : this.pageData = this.pageData.concat(dataInfo);
				})
			},
			
			ViewInfo(){
				this.$getViewInfo('#navBox').then(res=>{
					if(res) this.viewTop = res.top;
				})
			},
			
			changeNav(index){
				this.current = index;
				this.getMore = true;
				this.pageindex = 1;
				this.user_space_manage();
			},
		},
		computed: {
			...mapState(['color', 'colorVal', 'vid']),
		},
		
		onReachBottom() {
			if(!this.getMore) return false;
			this.pageindex++;
			this.user_space_manage();
		},
		onPageScroll(e) {
			if(e.scrollTop > this.viewTop){
				this.bgColor = 1;
				this.transparent = true;
				this.fixed = true;
				this.title = this.classify_info.name
			}else{
				this.bgColor = 0;
				this.transparent = false;
				this.fixed = false;
				this.title = '';
			}
		},
		
		onShareAppMessage() {
			return {
				title: this.classify_info.name,
				desc: this.classify_info.classinfo,
				path:`/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: this.imgUrl+this.classify_info.classimg
			}
		},
		
		onShareTimeline(){
			return {
				title: this.classify_info.classinfo,
				query: {share_v_id: this.vid},
				imageUrl: this.imgUrl+this.classify_info.classimg
			}
		}
	}
</script>

<style lang="scss" scoped>
	.active::after {
		content: '';
		width:40rpx;
		height: 2px;
		background-color: var(--color);
		position: absolute;
		left:50%;
		bottom: 0;
		transform: translate(-50%,0);
	}
	.fixedBox{
		position: fixed;
		top:90px;
		left:0;
		z-index:888;
	}
	.topBg{
		width:100%;
		height: 200px;
	}
	.content{
		padding:0 30rpx;
		padding-top:88px;
	}
	.imgli{
		width:80rpx;
		height: 80rpx;
	}
	.nav{
		border-radius: 30rpx 30rpx 0 0;
		margin-top: -30rpx;
	}
</style>
